<template>
    <div class='body'>
        <div class="main">
            <div class="top">
                <el-button type="primary" @click="fk">创建反馈</el-button>
            </div>
            <div class="bom" style="justify-content: flex-start" v-if="alldata">
                <div class="bom-box" v-for="item in alldata">
                    <div class="yi">
                        <div class="tit">
                            <img :src="item.img" alt="" width="25" height="25">
                            <span style="margin-left: 15px;">{{ item.name }}</span>
                        </div>
                        <div class="con">
                            {{ item.txt }}
                        </div>
                    </div>
                    <div class="er" v-if="item.pl">
                        <div class="tit">
                            <img :src="item.plimg" alt="" width="25" height="25">
                            <span style="margin-left: 15px;">{{ item.plname }}</span>
                        </div>
                        <div class="con">
                            {{ item.pl }}
                        </div>
                    </div>
                    <div class="er" v-else-if="qxstore.qx == 'admin'">
                        <el-text class="mx-1" type="success" style="cursor: pointer;" @click="hf(item.fkid)">点击回复</el-text>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 回复 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="500">
        <span>回复信息:</span>
        <el-input v-model="pl" style="width: 240px" placeholder="请输入回复信息" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="qdhf">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 创建 -->
    <el-dialog v-model="dialogVisible1" title="Tips" width="500">
        <span>反馈信息:</span>
        <el-input v-model="fktxt" style="width: 240px" placeholder="请输入反馈信息" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取消</el-button>
                <el-button type="primary" @click="qdfk">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { fkhfdata, fkhf, fkdata, addfk, alluserdata, toudata } from '@/api/info/index'
import moment from 'moment';
import { ElMessage } from 'element-plus'
import { useCountStore } from "@/store/count";
const qxstore = useCountStore()
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
const open2 = (data?: any) => {
    if (data) {
        ElMessage({
            message: data,
            type: 'success',
        })
    } else {
        ElMessage({
            message: 'Congrats, this is a success message.',
            type: 'success',
        })
    }

}
let tableData: any
onMounted(() => {


    // 获取当前时间
    // const loginTime1 = new Date();
    // let aaa = moment(loginTime1).format('YYYY-MM-DD HH:mm:ss');
    // console.log("aaaa", aaa);


    // 测试base64存储
    toudata().then((res: any) => {
        console.log("imgs", res);

    })
    aaa()
})
let aaa = () => {
    alluserdata().then((res: any) => {
        console.log("imgssss", res);
        tableData = res.data
        nex()
    })
}
let nexs: any
let alldata = ref()
let nex = () => {
    fkdata().then(res => {
        console.log("fkdata", res);
        res.data.forEach((item: any) => {
            for (let i = 0; i < tableData.length; i++) {
                if (item.userid == tableData[i].id) {
                    item.name = tableData[i].name
                    item.img = tableData[i].tou
                }
            }
        })
        nexs = res.data
        console.log("zui", res.data);
        fkhfdata().then(ress => {
            console.log("fkhf", ress);
            nexs.forEach((item: any) => {
                for (let i = 0; i < ress.data.length; i++) {
                    if (item.fkid == ress.data[i].fkid) {
                        item.pl = ress.data[i].txt
                        for (let k = 0; k < tableData.length; k++) {
                            if (ress.data[i].useid == tableData[k].id) {
                                item.plname = tableData[k].name
                                item.plimg = tableData[k].tou
                            }
                        }
                    }
                }
            })
            console.log(nexs);
            alldata.value = nexs.reverse()
        })
    })
}
// 回复评论
const dialogVisible = ref(false)
let pl = ref()
let fkid = ref()
let hf = (data: any) => {
    console.log(data);
    fkid.value = data
    dialogVisible.value = true
}
let qdhf = () => {
    fkhf({
        fkid: fkid.value,
        txt: pl.value,
        userid: qxstore.id
    }).then(res => {
        open2(res.data.msg)
        dialogVisible.value = false
        aaa()
    })
}
// 创建评论
const dialogVisible1 = ref(false)
let fktxt = ref()
let fk = (data: any) => {
    console.log(data);
    fkid.value = data
    dialogVisible1.value = true
}
let qdfk = () => {
    addfk({
        txt: fktxt.value,
        userid: qxstore.id
    }).then(res => {
        open2(res.data.msg)
        dialogVisible1.value = false
        aaa()
    })
}
</script>
<style  lang='less'>
.body {
    background-color: rgb(245, 249, 250);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .main {
        width: 80%;
        height: 95%;
        // background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .top {
            width: 100%;
            height: 10%;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 0px 10px 25px;
            display: flex;
            align-items: center;
        }

        .bom {
            width: 100%;
            height: 89%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
            box-sizing: border-box;
            padding-top: 25px;
            padding-left: 10px;

            .bom-box {
                width: 1000px;
                padding: 0 0 0 25px;
                margin-bottom: 25px;

                .yi {
                    width: 100%;
                    border-bottom: 1px solid #d9d9d9;
                    padding-bottom: 10px;

                    .tit {
                        display: flex;
                        align-items: center;
                    }

                    .con {
                        margin-top: 15px;
                    }
                }

                .er {
                    width: 980px;
                    padding-top: 10px;
                    padding-bottom: 10px;
                    padding-left: 5px;
                    margin-left: 25px;
                    border-bottom: 1px solid #d9d9d9;
                    border-left: 1px solid #d9d9d9;

                    .tit {
                        display: flex;
                        align-items: center;
                    }

                    .con {
                        margin-top: 15px;
                        word-wrap: break-word;
                        /* 允许长单词换行到下一行 */
                        overflow-wrap: break-word;
                        /* （与word-wrap兼容性更好） */
                        word-break: normal;
                        /* 在合适的断字点换行，保持英文单词完整性 */
                    }
                }
            }
        }
    }
}
</style>